<template>
  <div class="config-contact-panel">
    <!-- start 已选择的人员 -->
    <div class="result-set">
      <span class="default" v-if="!checked.length">{{$t('common.placeholder.selectContentBelow')}}</span>

      <el-tag
        type="info"
        v-for="(tag, index) in checked"
        :key="tag.id"
        @close="handleDelete(tag, index)"
        closable
        v-else
      >
        <template v-if="isOpenData && tag.staffId">
          <open-data type="userName" :openid="tag.staffId"></open-data>
        </template>
        <template v-else>
          {{ tag.name }}
        </template>
      </el-tag>
    </div>
    <!-- end 已选择的人员 -->

    <div class="contact-tabs-panel">
      <!-- start 模糊搜索 -->
      <div v-if="showSearch" class="search-panel">
        <i class="el-icon-search"></i>
        <input
          type="text"
          v-model="keyword"
          :placeholder="$t('common.base.search')"
          @input="search"
        />
        <i class="clear el-icon-error" v-if="keyword" @click="handleClear"></i>
      </div>
      <!-- end 模糊搜索 -->

      <el-tabs v-model="currTab">
        <el-tab-pane
          v-for="tab in tabs"
          :key="tab.value"
          :label="tab.displayName"
          :name="tab.value"
        >
          <component
            :ref="`tabPane${tab.value}`"
            :is="tab.component"
            :share-data="{ ...propsForSubComponents, type: tab.value }"
            @update="update"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
/* component */
import DepartmentAndUser from './components/DepartmentAndUser';
import Department from './components/Department';
import Dynamic from './components/Dynamic.vue';
import Role from './components/Role';
/* utils */
import _ from 'lodash';
import { isOpenData } from '@src/util/platform'
import { t } from '@src/locales'

export default {
  name: 'config-contact',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    showDynamic: {
      type: Boolean,
      default: true
    },
    showSearch: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      currTab: '1',
      tabs: this.buildTabs(),
      checked: [], // 已选择
      keyword: '', // 搜索关键字
      isOpenData,
    };
  },
  computed: {
    /** 子组件所需的数据 */
    propsForSubComponents() {
      return {
        keyword: this.keyword,
        value: this.checkedIds
      };
    },
    /** 已选ids */
    checkedIds() {
      return this.checked.map(val => {
        return val.id;
      });
    }
  },
  mounted() {
    // 初始化已选择数据
    this.checked = _.cloneDeep(this.value);
  },
  methods: {
    /** 构建tabs */
    buildTabs() {
      return [
        {
          displayName: t('common.label.member'),
          component: DepartmentAndUser.name,
          value: '1',
          show: true
        },
        {
          displayName: t('common.label.department'),
          component: Department.name,
          value: '2',
          show: true
        },
        {
          displayName: t('common.label.role'),
          component: Role.name,
          value: '3',
          show: true
        },
        // {
        //   displayName: '动态获取',
        //   component: Dynamic.name,
        //   value: '4',
        //   show: this.showDynamic
        // }
      ].filter(tab => tab.show);
    },
    /** 清空搜索 */
    handleClear() {
      this.keyword = '';
      this.search();
    },
    /** 模糊搜索 */
    search: _.debounce(function() {
      this.$refs[`tabPane${this.currTab}`][0].search();
    }, 500),
    /** 更新选择数据 */
    update({ data, checked, type }) {
      // 选中
      if (checked) {
        return this.checked.push({
          ...data,
          type
        });
      }

      // 取消选中
      let idx = this.checked.findIndex(item => item.id == data.id);
      if (idx > -1) this.checked.splice(idx, 1);
    },
    /** 删除节点选中 */
    handleDelete(data, index) {
      let { type } = data;
      this.checked.splice(index, 1);

      // 动态获取
      if (type > 4) return this.$refs.tabPane4[0]?.handleDelete(data);

      // 取消选中
      let parent = this.$refs[`tabPane${type}`][0];
      parent.$refs.contactTree.setChecked(data, false);
    }
  },
  watch: {
    currTab(newVal, oldVal) {
      // 切换tab后，清空搜索条件
      if (this.keyword) {
        this.keyword = '';

        this.$nextTick(() => {
          this.$refs[`tabPane${oldVal}`][0].search();
        });
      }
    }
  },
  components: {
    [DepartmentAndUser.name]: DepartmentAndUser,
    [Department.name]: Department,
    [Dynamic.name]: Dynamic,
    [Role.name]: Role
  }
};
</script>

<style lang="scss" scoped>
.config-contact-panel {
  .result-set {
    height: 84px;
    padding: 4px;
    overflow-y: auto;
    border: 1px solid $color-border-l2;

    .default {
      padding-left: 12px;
      line-height: 24px;
      color: #bfbfbf;
    }

    .el-tag {
      margin: 0 4px 4px 0;
    }
  }

  .contact-tabs-panel {
    padding-top: 8px;
    position: relative;

    .search-panel {
      width: 200px;
      padding: 6px 12px;
      border-radius: 20px;
      background-color: $bg-color-l1;

      display: flex;
      align-items: center;
      overflow: hidden;

      position: absolute;
      top: 14px;
      right: 0;
      z-index: 9;

      i {
        font-size: $font-size-base;
        color: $text-color-regular;
        margin-right: 4px;

        &.clear {
          color: $text-color-secondary;
          cursor: pointer;
        }
      }

      input {
        padding: 0;
        line-height: 16px;
        border: none;
        background-color: inherit;
      }
    }
  }

  ::v-deep .el-tabs {
    &__header {
      margin-bottom: 0;

      .el-tabs__nav-wrap {
        &::after {
          height: 1px;
          background-color: $color-border-l2;
        }
      }

      .el-tabs__item {
        padding: 0 16px !important;
      }
    }

    &__content {
      border: 1px solid $color-border-l2;

      .el-tab-pane {
        height: 270px;
      }
    }
  }
}
</style>

<style lang="scss">
.el-tree {
  label {
    margin-bottom: 2px;
  }

  .el-tree-node__label {
    @include text-ellipsis();
  }
}

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: $color-primary-light-1;
}
</style>
